<template>
  <view class="container">
    <view class="rain_top">
      <view v-for="(item, index) in chooseList" :key="index" :class="chooseIndex == index ? 'active' : ''" @click="choose(index)">{{ item }}</view>
    </view>
    <view class="rain_bot">
      <view class="charts-box">
        <qiun-data-charts v-if="isChart"  type="area" :opts="opts" :chartData="chartData" :ontouch="true" />
      </view>
    </view>
    <view class="rain">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">降雨量</div>
      </view>
      <view class="rain_info">
        <view class="rain_list">
          <view>本日</view>
          <view>本月</view>
          <view>本年</view>
        </view>
        <view class="rain_lists">
          <view>{{ rainfallInfo.day || '0.00' }} mm</view>
          <view>{{ rainfallInfo.month || '0.00' }} mm</view>
          <view>{{ rainfallInfo.year || '0.00' }} mm</view>
        </view>
      </view>
    </view>
    <view class="weather">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">天气预报</div>
      </view>
      <view class="weather_info">
        <view v-for="(item, index) in weatherlist" :key="index" class="weather_info_box">
          <!-- <view>{{ item.date }}</view>
          <view>{{ item.dayweather }}</view>
          <view>{{ item.nighttemp + ' ~ ' + item.daytemp }}&ensp;℃</view> -->
          <view>{{ item.date }}</view>
          <view>{{ item.dayText }}</view>
          <view>{{ item.low + ' ~ ' + item.high }}&ensp;℃</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        chooseList: [' 周 ', '月度', '季度'],
        chooseIndex: 0,
        isChart: false,
        opts: {
          color: ["#5D8FF6"],
          padding: [15,15,5,10],
          enableScroll: false,
          dataPointShape: false,
          legend: {
            show: false,
          },
          xAxis: {
            disableGrid: true,
            fontColor: '#808080',
            axisLineColor: '#808080',
            fontSize: 12,
            scrollShow: false,
            itemCount: 5
          },
          yAxis: {
            showTitle: true,
            gridType: "dash",
            dashLength: 2,
            gridColor: '#E6E6E6',
            data: [{
              title: "mm",
              fontColor: '#808080',
              axisLineColor: '#808080',
              fontSize: 12,
              min: 0,
              // max: 20
            }]
          },
          extra: {
            area: {
              type: "curve",
              opacity: 0.9,
              addLine: true,
              width: 2,
              gradient: true,
              activeType: "hollow"
            }
          }
        },
        chartData: {},
        rainfallInfo: {},
        weatherlist: [],
      }
    },
    onLoad(options) {
      this.getRain()
      this.rainfall()
      this.getWeather()
    },
    methods: {
      // 雨情检测
      getRain() {
        let xdata = []
        let sdata = []
        let temp = {
          stcd: '41815480',
        }
        if(this.chooseIndex == 0) {
          temp.count = 7
        } else if(this.chooseIndex == 1) {
          temp.count = 30
        } else if(this.chooseIndex == 2) {
          temp.count = 90
        }
        this.$request.queryYLZXX(temp).then(res => {
          let list = res.data || []
          var chunkSize = Math.ceil(list.length / 6)
          for (var i = 0; i < list.length; i += chunkSize) {
            xdata.push((list[i].idtm).substring(6, 10))
            sdata.push(list[i].accp)
          }
          // list.forEach(v => {
          //   xdata.push((v.idtm).substring(6, 10))
          //   sdata.push(v.accp)
          // })
          setTimeout(() => {
            this.isChart = true
            this.getServerData(xdata, sdata);
          }, 0);
        })
      },
      // 雨情
      getServerData(xdata, sdata) {
        let res = {
          categories: xdata,
          series: [
            {
              name: "降雨量",
              data: sdata,
            },
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      },
      // 降雨量
      rainfall() {
        this.$request.queryNYRJYL({ stcd: '41815480' }).then(res => {
          this.rainfallInfo = res.data || {}
        })
      },
      choose(index) {
        this.chooseIndex = index
        this.isChart = false
        this.getRain()
      },
      // 天气预报
      getWeather() {
        uni.request({
          // url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=1b42913c1b701e6bdf8ef801c5e7dfc3&city=371000&extensions=all',
          url: 'https://weather.cma.cn/api/weather/view?stationid=54774',
          data: {},
          success: (res) => {
            // let list = res.data.forecasts[0].casts || []
            let list = res.data.data.daily || []
            this.weatherlist = list
          },
          fail: (err) => {
            this.weatherlist = []
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .rain_top {
    padding: 25rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    view {
      font-size: 30rpx;
      line-height: 30rpx;
      padding: 10rpx 40rpx;
      border-radius: 30rpx;
      background-color: #f6f6f6;
      color: #838383;

      &.active {
        color: #fff;
        background-color: #458EFB;
        border-color: #458EFB;
      }
    }
  }

  .rain_bot {
    .charts-box {
      width: 100%;
      height: 400rpx;
    }
  }

  .topTitle {
    display: flex;
    align-items: center;

    .topTitle_left {
      width: 8rpx;
      height: 28rpx;
      background: #0D91FF;
    }

    .topTitle_right {
      font-size: 32rpx;
      font-weight: bold;
      color: #0D91FF;
      margin-left: 13rpx;
    }
  }

  .rain {
    margin-top: 50rpx;
    padding: 0 25rpx;

    .rain_info {
      margin-top: 25rpx;
      
      .rain_list, .rain_lists {
        display: flex;
        align-items: center;

        view {
          flex: 1;
          text-align: center;
          border-right: 1px solid #f2f1f1;
          font-size: 30rpx;
          line-height: 30rpx;
          padding: 20rpx 0;
        }
      }
    }
  }

  .weather {
    margin-top: 30rpx;
    padding: 0 25rpx;

    .weather_info {
      padding-top: 25rpx;

      .weather_info_box {
        display: flex;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 1px solid #e9e7e7;

        &:nth-child(1) {
          border-top: 1px solid #e9e7e7;
        }

        view {
          flex: 1;
          text-align: center;
          font-size: 30rpx;
          line-height: 30rpx;
        }
      }
    }
  }
</style>
